<template>
  <div class="tab" v-show="show">
    <router-link to="/index" tag="div" class="tab-item" @click="clickLink">
    <div class="icon-home"></div>
    <div class="tab-link">首页</div>
    </router-link>
    <router-link to="/bag" tag="div" class="tab-item" @click="clickLink">
      <div class="icon-bag"></div>
      <div class="tab-link">商城</div>
      </router-link>
    <router-link to="/shopping" tag="div" class="tab-item" @click="clickLink">
      <div class="icon-shopping"></div>
      <div class="tab-link">购物车</div>
      </router-link>
    <router-link to="/mine" tag="div" class="tab-item" @click="clickLink">
      <div class="icon-mine"></div>
      <div class="tab-link">我的</div>
      </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    clickLink(){
      this.$store.commit("setTransition", "turn-on");
    },
    clickLink1(){
      this.$store.commit("setTransition", "turn-off");
    }
  },
  watch: {
    $route(to, from) {
      if (
        to.path !== "/index" &&
        to.path !== "/bag" &&
        to.path !== "/shopping" &&
        to.path !== "/mine"
      ) {
        this.show = false;
      } else {
        this.show = true;
      }
      if (
        from.path === "/index" &&
        from.path === "/bag" &&
        from.path === "/shopping" &&
        from.path === "/mine"
      ) {
        this.show = true;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import '~common/stylus/variable';

.tab {
  display: flex;
  height: 100px;
  font-size: $font-size-medium;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #BFBFBF;
  background-color: $color-text;

  .tab-item {
    flex: 1;
    text-align: center;
    padding-top: 14px;

    .icon-home {
      width: 41px;
      height: 41px;
      background-image: url('../../assets/home.png');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0 auto;
    }

    .icon-bag {
      width: 41px;
      height: 41px;
      background-image: url('../../assets/bag.png');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0 auto;
    }

    .icon-shopping {
      width: 41px;
      height: 41px;
      background-image: url('../../assets/shopping.png');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0 auto;
    }

    .icon-mine {
      width: 41px;
      height: 45px;
      background-image: url('../../assets/mine.png');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      margin: 0 auto;
    }

    .tab-link {
      margin-top: 11px;
      padding-bottom: 5px;
      color: $color-text-l;
      // 此处是当做了切换之后则加深效果
    }

    &.router-link-active {
      .tab-link {
        color: $color-theme;
      }

      .icon-home {
        background-image: url('../../assets/home-linght.png');
      }

      .icon-bag {
        background-image: url('../../assets/bag-linght.png');
      }

      .icon-shopping {
        background-image: url('../../assets/shopping-linght.png');
      }

      .icon-mine {
        background-image: url('../../assets/mine-linght.png');
      }
    }
  }
}
</style>

